<template>
  <div class="nav-card-wrap">
    <div
      v-for="(nav, i) in navCardList"
      :key="i"
      :class="{ 'nav-item': true, 'active': navCinfig.hasEvent && currentNav === nav.navTitle }"
      @click="changeNav(nav.navTitle)"
    >
      <div class="title-row">
        <img :src="nav.navIcon">
        <span>{{ nav.navTitle }}</span>
      </div>
      <div>
        <span :style="{ color: navCinfig.numColor }" class="num">{{ nav.num | numFormat }}</span>
        <span class="unit-text">{{ nav.unit }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navCardList: {
      type: Array,
      default: () => []
    },
    navCinfig: {
      type: Object,
      default: () => {
        return {
          cardWidth: 158,
          cardHeight: 70,
          numColor: '',
          hasEvent: true
        };
      }
    }
  },
  data() {
    return {
      currentNav: ''
    };
  },
  mounted() {
    this.currentNav = this.navCardList[0].navTitle;
  },
  methods: {
    changeNav(data) {
      if (this.navCinfig.hasEvent) {
        this.currentNav = data;
        this.$emit('changeNav', data);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-card-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  width: 100%;

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 3.95rem;
    width: 9.6875rem;
    padding: 0.5rem 0;

    border-radius: 0.25rem;
    font-size: $commonContentText;
    color: $light3Grey;

    background-color: $itemBg;

    .title-row {
      display: flex;
      align-items: center;

      img {
        margin-right: 0.3125rem;
        width: 0.875rem;
        height: 0.875rem;
      }
    }

    .num {
      font-size: $smallHeadingsText;
    }

    &.active {
      background-color: $itemActiveBg;
      cursor: pointer;

      div {
        cursor: pointer;
      }
    }
  }
}
</style>
